<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/css/tag-cloud.css">
    <script src="js/jquery.min.2.1.4.js"></script>
    <title>用户画像</title>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row justify-content-center">
        <div class="offset-3 offset-md-2"></div>
        <!-- <div class="tag-cloud col-lg-6">
            <div class="dadiv">
                <div class="tagBall">
                    <a class="tag" href="javasript:''" v-for="(tag,index) in tagCloudList">{{tag.name}}</a>
                </div>
            </div>
        </div> -->
        <div id="tag" v-if="tagCloudList!=''">
            <div class="title"  style="font-size: 2vw; font-weight: 600;color: #2e6da4;">
                用户画像
            </div>
            <div class="tag-cloud-list">
                <div class="tag-cloud-item" v-for="(tag,index) in tagCloudList">
                    <div class="tag-cloud-item-name">{{tag.name}}</div>
                </div>
            </div>
        </div>
    </div>
    <div id="info" v-if="eventData!=''">
        <div class="title"  style="font-size: 2vw; font-weight: 600;color: #2e6da4;">
            个人统计信息
            <ul>
                <li v-for="(p,index) of eventData" :key="index">
                    <div class="alert item alert-info" role="alert">
                        <strong>  {{p.value}} </strong>
                     </div>
                </li>
            </ul>
            
        </div>
<!--       -->
<!--        <div class="alert item alert-info" role="alert">-->
<!--        </div>-->
<!--        <div class="alert item alert-warning" role="alert">-->
<!--            <strong> {{eventData[2].associate}}</strong>-->
<!--        </div>-->
<!--        <div class="alert item alert-danger" role="alert">-->
<!--            <strong> {{eventData[3].address}}</strong>-->
<!--        </div>-->
        
    </div>
    <div class="zhou"  v-if="timelineData!=''">
        <div class="row">
            <div class="col-sm-4 zhouItem" style="text-align: left;">
                <div class="top">{{timelineData[0].name}}</div>
                <div class="year"><span>{{timelineData[0].value}}</span></div>
                
            </div>
            <div class="col-sm-4 zhouItem" style="text-align: center;">
                <div class="bottom">{{timelineData[1].name}}</div>
                <div class="year"><span>{{timelineData[1].value}}</span></div>
            </div>
            <div class="col-sm-4 zhouItem"  style="text-align: right;">
                <div class="top" style="right:0">{{timelineData[2].name}}</div>
                <div class="year"><span>{{timelineData[2].value}}</span></div>
            </div>
        </div>
    </div>
   
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app;
    app = new Vue({
        el: '#app',
        data: {
            tagCloudList: [],
            chartArr: [],
            show:false,
            eventData:'',
            timelineData:''
        },
        methods: {
            getChartArr: function () {
                var that = this;
                that.chartArr = [5, 10, 15, 20, 25, 30];
            },
            getList: function (){
                console.log(4444)
                      var that = this
                        $.get("http://43.128.71.35:8080/userProfile/api/timeline/100", {
                        
                         
                        }, (res, err) => {
                          console.log(res)
                          this.timelineData=res
                        }, "JSON")
                        $.get("http://43.128.71.35:8080/userProfile/api/tagCloudList", {
                         
                          
                        }, (res, err) => {
                            console.log(res,'tagCloudList')
                          this.tagCloudList = res
                          var arr = [{name: "男性"}, {name: "女性"}];
                            // that.tagCloudList = arr;
                            // this.show =true
                            // this.tagCloud() 
                        }, "JSON")
                        $.get("http://43.128.71.35:8080/userProfile/api/associateList/100", {
                         
                        }, (res, err) => {
                            console.log(res)
                          this.eventData = res
                        }, "JSON")
                    },
                    tagCloud(){
                        const that=this
                        $( '.tag-cloud' ).ready( function() {
                            let settings = {
                                entries: that.tagCloudList,
                                width: 956,
                                height: 280,
                                radius: 200,
                                radiusMin: 200,
                                bgDraw: true,
                                bgColor: 'transparent',
                                opacityOver: 1.00,
                                opacityOut: 0.05,
                                opacitySpeed: 6,
                                fov: 500,
                                // speed: 6,
                                fontFamily: 'Source Han Sans CN',
                                fontSize: '20',
                                fontColor: 'url(#g3)',
                                fontWeight: 'normal',//bold
                                fontStyle: 'normal',//italic
                                fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                                fontToUpperCase: false
        
                            };
                            // var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
                            $('.tag-cloud').svg3DTagCloud(settings);
                        })
                    },
                   
        },
        created: function () {
            // this.getTagCloudList();
            this.getChartArr();
            this.getList()
        }

    });
</script>
<style>
    #info{
        background-color: #F1F9FC;
        width: 45%;
        float: left;
        padding: 2.5%;
        
    }
    #info .title{
        padding-bottom: 1vw;
    }
    .item{
        padding: 0.5vw;
        font-size: 1.5vw; font-weight: 600;
    }
    .zhou{
        position: relative;
        background-color: #fff;
        width: 45%;
        float: left;
        padding-left:2.5%;
       min-height: 10vw;
    }
    .zhouItem{
        position: relative;
        margin-top: 10vw;

    }
    .zhouItem::after{
        content: '';
        position: absolute;
        height: 5px;
    top: 37px;
        background-color: #2692B6;
        width: 100%;z-index: 0;
    }
    .zhouItem:last-child:after{
        width: 20%;
    }
    .zhouItem .year{
        display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 70px;
    background-color: #5bc0de;
   
    border-radius: 5px;
    border: 3px solid #fff;
    border-color: #46b8da;
    text-align: center;
    margin-left: 34px;
    transform: rotate(45deg);
    position: relative;
    z-index: 2;
    }
    .year span {
        display: block;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    transform: rotate(-45deg);

}
.top{
    position: absolute;
    top: -65px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #d4edda;
    border:1px solid #c3e6cb;
    color: #155724;
    border-radius: 4px;
}
.bottom{
    position: absolute;
    top: 100px;
    padding: 10px;
    background-color: #d4edda;
    border:1px solid #c3e6cb;
    color: #155724;
    border-radius: 4px;
    left: 30%;
}
</style>
</body>
</html>